<!--vue模板-->
<template>
  <div>
    <!--搜索条件-->
    <div style="border: #fff solid 1px;background-color: #fff; ">
      <el-form style="margin-top: 15px;" :model="freightquote">
        <el-row>
          <el-col :span="4" style="margin-left: 15px;">
            <el-form-item label="报价编码 :">
              <el-input v-model="freightquote.quotation" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-button style="margin-left: 30px;" type="primary" @click="initData">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-row>
      </el-form>
    </div>
    <!--客户列表-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="index" label="行号" width="80" header-align="center" align="center" />
      <el-table-column prop="quotation" label="报价编号" width="150" header-align="center" align="center" />
      <el-table-column prop="freight_id" label="货代" width="100" header-align="center" align="center" />
      <el-table-column prop="create_time" label="报价时间" width="200" header-align="center" align="center" />
      <el-table-column prop="is_default" label="默认报价" width="100" header-align="center" align="center">
        <template v-slot="{ row }">
          <span v-if="row.is_default == 1">默认</span>
          <span v-else-if="row.is_default == 2">非默认</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="150" header-align="center" align="center">
        <template v-slot="{ row }">
          <span v-if="row.type == 1">砍价退单</span>
          <span v-else-if="row.type == 2">信息错误退单</span>
          <span v-else-if="row.type == 3">更新出运</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150" header-align="center" align="center" />
      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{ row }">
          <el-button type="primary" text>报价详情</el-button>
          <el-button type="primary" text>确认订单</el-button>
          <el-button type="primary" text>设为默认</el-button>
          <el-button type="primary" text>错误退单</el-button>
          <el-button type="primary" text>砍价退单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div style="background-color: #fff; height: 50px; line-height: 50px;">
      <el-pagination background :page-size="pageSize" layout="total,sizes,prev, pager, next, jumper" :total="total"
        @size-change="chgsize" @current-change="chgpg" />
    </div>
  </div>
</template>

<!--vue组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
//引入api
import { queryfreightQuote } from "@/api/freightinquiry.js";
//引入路由
import { useRouter } from "vue-router";
//表格数据
const tableData = ref([]);
//路由实例
const router = useRouter();
//搜索条件
const freightquote = ref({
  quotation: ""
});
//重置
function reset() {
  freightquote.value = {
    quotation: ""
  };
  initData();
}
//分页信息
const page = ref(1);//当前页 默认第一页
const pageSize = ref(10);//每页记录数
const total = ref(0);//总记录数

//每页记录数的变更
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从第一页开始查
  page.value = 1;
  //查询数据
  initData();
};
//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
};

//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    //条件查询
    quotation: freightquote.value.quotation
  };
  let res = await queryfreightQuote(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接受分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}


//生命周期钩子
onBeforeMount(() => {
  
  initData();
});
</script>

<!--vue样式 scoped 当前样式只适用于当前组件-->
<style scoped></style>
